<template>
    <app-layout :haveBackground="false">
        <view v-if="!getSuccess">
            <app-buy-prompt :url="url" :height="19"></app-buy-prompt>
            <view v-if="setting" @click="toRule" class="rule">活动规则</view>
            <image v-if="setting" @click="toLog" class="log-btn" src="./../image/log.png"></image>
            <image class="head-img" :src="setting.activity_bg_pic ? setting.activity_bg_pic : setting.default_activity_bg_pic"></image>
            <view v-if="setting" :style="bgStype" class="activity">
                <view v-if="(detail && detail.name) || msg" class="activity-name dir-top-nowrap main-center cross-center">
                    <view>{{detail.name ? detail.name : ''}} {{msg ? msg:'正在进行中'}}</view>
                    <view v-if="detail.start_time && detail.end_time">{{detail.start_time}}至{{detail.end_time}}</view>
                    <view v-if="detail.style == 2" class="stage main-center">
                        <view @click="handle(item)" v-for="(item,index) in rewards" :key="index" class="hb dir-top-nowrap main-center cross-center">
                            <image v-if="item.is_exchange > -1" :src="`./../image/hb-${setting.style}-active.png`"></image>
                            <image v-else :src="setting.style_pic"></image>
                            <view class="mask" v-if="item.people_number > 0 && item.is_exchange == -2">
                                <image src="./../image/lock.png" class="lock-icon"></image>
                            </view>
                            <image :src="userInfo.avatar" class="reward-user" v-if="item.is_exchange > -2 && item.type == 0"></image>
                            <view class="reward-text dir-top-nowrap cross-center main-center" v-if="(item.status == 'balance' || item.status == 'cash') && item.is_exchange > -1">
                                <view>{{item.real_reward}}元</view>
                                <view>{{item.status == 'balance' ? '商城余额':'现金红包'}}</view>
                            </view>
                            <view class="reward-text dir-top-nowrap cross-center main-center" v-if="item.status == 'integral' && item.is_exchange > -1">
                                <view>{{item.real_reward}}积分</view>
                            </view>
                            <view class="reward-text dir-top-nowrap cross-center main-center" v-if="(item.status == 'card' || item.status == 'coupon') && item.is_exchange > -1">
                                <image class="card-img" v-if="item.status == 'card'" :src="item.card.pic_url"></image>
                                <view v-if="item.status == 'coupon'">
                                    {{item.coupon.type == 2 ? '￥':''}}
                                    <text>{{item.coupon.type == 2 ? item.coupon.sub_price : item.coupon.discount}}</text>
                                    {{item.coupon.type == 1 ? '折':''}}
                                </view>
                                <view class="t-omit">{{item.status == 'coupon' ? item.coupon.name: item.card.name}}</view>
                            </view>
                            <view class="reward-text dir-top-nowrap cross-center main-center" v-if="item.status == 'goods' && item.is_exchange > -1">
                                <image class="card-img" :src="item.goods.cover_pic"></image>
                                <view class="t-omit">{{item.goods.name}}</view>
                            </view>
                            <view v-if="item.is_exchange == -2">{{item.people_number}}人解锁</view>
                            <view v-else-if="item.is_exchange == -1">可解锁</view>
                            <view v-else>已领取</view>
                        </view>
                    </view>
                </view>
                <view class="hb-list dir-left-wrap">
                    <view v-for="(item,index) in number" :key="index" :style="{'width': item.list ? item.number*134 + 'rpx' : ''}">
                        <!-- 样式一的小红包 -->
                        <view class="dir-left-wrap" v-if="item.list">
                            <view @click="handle(obj)" v-for="obj in item.list" :key="obj.index">
                                <view class="hb">
                                    <image class="hb-bg" v-if="obj.is_exchange > -1" :src="`./../image/hb-${setting.style}-active.png`"></image>
                                    <image class="hb-bg" v-else :src="setting.style_pic"></image>
                                    <image :src="obj.reward.avatar" class="reward-user" v-if="obj.is_exchange != -2 && obj.level == 'small'"></image>
                                    <view class="reward-text t-omit" v-if="obj.is_exchange != -2 && obj.level == 'small'">{{obj.reward.nickname}}</view>
                                    <view class="send-text">{{obj.is_exchange == -2 ? '发送好友' : obj.reward.status == 'coupon' ? obj.reward.coupon.type == 2 ? '领到满减券':'领到打折券' : '领到' + obj.reward.real_reward + '元'}}</view>
                                </view>
                            </view>
                        </view>
                        <!-- 样式一的大红包 || 样式二的小红包 -->
                        <view @click="handle(item)" class="hb" :class="{'big': detail.style == 1 && item.level != 'small'}" v-else>
                            <image class="hb-bg" v-if="item.is_exchange > -1" :src="`./../image/hb-${setting.style}-active.png`"></image>
                            <image :style="{'border-radius':item.level != 'small' ? radius: ''}" class="hb-bg" v-else :src="setting.style_pic"></image>
                            <view :style="{'border-radius':radius}" class="mask" v-if="detail.style == 1 && item.level != 'small' && item.is_exchange == -2">
                                <image src="./../image/lock.png" class="lock-icon"></image>
                                <view class="need-people">分享{{item.people_number}}人解锁</view>
                            </view>
                            <image :src="userInfo.avatar" class="reward-user" v-if="item.is_exchange > -1 && item.type == 0 && item.level != 'small'"></image>
                            <view class="need-people" v-if="item.is_exchange == -1 && item.type != 0">已达到解锁条件
                            </view>
                            <!-- 大红包金额 -->
                            <view class="reward-text dir-top-nowrap cross-center main-center" v-if="(item.status == 'balance' || item.status == 'cash') && item.is_exchange > -1">
                                <view><text>{{item.real_reward}}</text>元</view>
                                <view class="big-text" v-if="detail.style == 1 && item.type != 0">{{item.status == 'balance' ? '商城余额':'现金红包'}}</view>
                            </view>
                            <!-- 大红包积分 -->
                            <view class="reward-text dir-top-nowrap cross-center main-center" v-if="item.status == 'integral' && item.is_exchange > -1">
                                <view><text>{{item.real_reward}}</text>积分</view>
                            </view>
                            <!-- 大红包卡券 -->
                            <view class="reward-text pic dir-top-nowrap cross-center main-center" v-if="(item.status == 'card' || item.status == 'goods') && item.is_exchange > -1">
                                <image v-if="item.status == 'card'" class="reward-card" :src="item.card.pic_url"></image>
                                <image v-if="item.status == 'goods'" class="reward-goods" :src="item.goods.cover_pic"></image>
                                <view class="t-omit">{{item.status == 'goods' ? item.goods.name:item.card.name}}</view>
                            </view>
                            <!-- 大红包优惠券 -->
                            <view class="reward-text dir-top-nowrap cross-center main-center"
                                  :class="detail.style == 1 ? 't-omit' : ''"
                                  v-if="(item.status == 'coupon' && item.is_exchange > -1)">
                                <view v-if="detail.style == 1">
                                    {{item.coupon.type == 2 ? '￥':''}}
                                    <text>{{item.coupon.type == 2 ? item.coupon.sub_price : item.coupon.discount}}</text>
                                    {{item.coupon.type == 1 ? '折':''}}
                                </view>
                                <view class="t-omit">{{detail.style == 2 || item.type == 0 ? item.coupon.type == 2 ? '满减券':'打折券' : item.coupon.name}}</view>
                            </view>
                            <image :src="item.reward.avatar" class="reward-user" v-if="item.is_exchange != -2 && item.level == 'small'"></image>
                            <view class="reward-text t-omit" v-if="item.is_exchange != -2 && item.level == 'small'">{{item.reward.nickname}}</view>
                            <view v-if="item.level == 'small'" class="send-text">{{item.is_exchange == -2 ? '发送好友' : item.reward.status == 'coupon' ? item.reward.coupon.type == 2 ? '领到满减券':'领到打折券' : '领到' + item.reward.real_reward + '元'}}</view>
                            <view v-else-if="detail.style == 2 && item.level != 'small'" class="send-text">{{item.is_exchange > -1 ? '已领取':'点我领取'}}</view>
                            <view v-else class="send-text">{{item.is_exchange == -2 ? '我的红包' : item.is_exchange == -1 ? '点我领取' : '已领取'}}</view>
                        </view>
                    </view>
                </view>
            </view>
            <view v-if="getView" @touchmove.stop.prevent catchtouchmove="true" class="get-dialog main-center cross-center">
                <view @click="toGet" class="get-item">
                    <image @click.stop="getView = false;" class="close-btn" src="/static/image/icon/invalid.png"></image>
                    <view class="get-text dir-top-nowrap main-center cross-center">
                        <view class="invite_user dir-top-nowrap main-center cross-center" v-if="invite_user">
                            <image :src="invite_user.avatar"></image>
                            <view class="t-omit">{{invite_user.nickname}}</view>
                        </view>
                        <view class="main-text">{{invite_user ? '送你一个红包' : '点我领红包'}}</view>
                        <view :style="{'margin-top': invite_user_id > 0 ? '35rpx' : '70rpx'}">恭喜发财，大吉大利！</view>
                    </view>
                    <image class="get-bg" src="./../image/get.png"></image>
                </view>
            </view>
            <view v-if="shareView" @touchmove.stop.prevent catchtouchmove="true" class="get-dialog main-center cross-center">
                <view class="get-item">
                    <image @click.stop="shareView = false;" class="close-btn" src="/static/image/icon/invalid.png"></image>
                    <view class="item-info dir-top-nowrap main-center">
                        <view class="reward-lock-text" :class="shareItem.coupon && shareItem.coupon.total_count > 0 ? 'more-place':''" v-if="shareItem.type != 0">解锁此关卡，即可获得</view>
                        <view class="item-about" v-if="(shareItem.status == 'balance' || shareItem.status == 'cash')">
                            <text>{{shareItem.max_number > 0 ? shareItem.max_number : shareItem.min_number}}</text>元
                        </view>
                        <view class="item-about" v-if="shareItem.status == 'integral'">
                            <text>{{shareItem.min_number}}</text>积分
                        </view>
                        <view class="item-about t-omit less-marging" v-else-if="shareItem.status == 'coupon'">
                            <view v-if="shareItem.coupon.type == 2">
                                ￥<text>{{shareItem.coupon.sub_price}}</text>
                                {{shareItem.coupon.type == 2 ? ' 满减券':' 打折券'}}
                            </view>
                            <view v-else>
                                <text>{{shareItem.coupon.discount}}</text>折
                                {{shareItem.coupon.type == 2 ? ' 满减券':' 打折券'}}
                            </view>
                        </view>
                        <view class="item-about t-omit card-name" v-else-if="shareItem.status == 'card'">{{shareItem.card.name}}</view>
                        <view class="item-about t-omit card-name" v-else-if="shareItem.status == 'goods'">{{shareItem.goods.name}}</view>
                        <view v-if="shareItem.type == 0">红包已包好，赶紧分享给好友吧！</view>
                        <view v-if="shareItem.type != 0 && shareItem.goods && shareItem.goods.stock > 0">剩余{{shareItem.goods.stock}}件</view>
                        <view v-if="shareItem.type != 0 && shareItem.card && shareItem.card.total_count > 0">剩余{{shareItem.card.total_count}}件</view>
                        <view v-if="shareItem.type != 0 && shareItem.coupon && shareItem.coupon.total_count > 0">剩余{{shareItem.coupon.total_count}}件</view>
                    </view>
                    <view class="dir-top-nowrap button-item">
                        <!--  #ifdef H5 -->
                        <button @click="hShareAppMessage(true)" class="to-share">发给好友</button>
                        <!--  #endif -->
                        <!--  #ifndef H5 -->
                        <button open-type="share" class="to-share">发给好友</button>
                        <!--  #endif -->
                        <!--  #ifndef MP-BAIDU -->
                        <button @click="toPoster" class="to-share">生成海报</button>
                        <!--  #endif -->
                    </view>
                    <image class="get-bg" src="./../image/share.png"></image>
                </view>
            </view>
            <view v-if="clearView" @touchmove.stop.prevent catchtouchmove="true" class="get-dialog main-center cross-center">
                <view v-if="clearItem" class="get-item clear">
                    <image @click.stop="clearView = false;" class="close-btn" src="./../image/close.png"></image>
                    <image class="get-bg" src="./../image/success.png"></image>
                    <view class="clear-item dir-top-nowrap main-center" :class="clearItem.reward.status == 'goods' && clearItem.reward.exchange_type == 'offline' ? 'goods':''">
                        <view class="clear-title">恭喜您解锁成功</view>
                        <view v-if="clearItem.reward.status == 'card'" class="clear-content no-text">获得1张卡券</view>
                        <view v-if="clearItem.reward.status == 'coupon'" class="clear-content no-text">获得1张优惠券</view>
                        <view v-if="clearItem.reward.status == 'goods'" class="clear-content">获得以下奖品</view>
                        <view v-if="clearItem.reward.status == 'balance'" class="clear-content">获得<text>{{clearItem.real_reward}}</text>元余额</view>
                        <view v-if="clearItem.reward.status == 'cash'" class="clear-content">获得<text>{{clearItem.real_reward}}</text>元现金红包</view>
                        <view v-if="clearItem.reward.status == 'integral'" class="clear-content">获得<text>{{clearItem.real_reward}}</text>积分</view>
                        <view v-if="clearItem.reward.status == 'cash'">请添加客服兑现红包</view>
                        <view class="clear-goods-item dir-left-nowrap cross-center" v-if="clearItem.reward.status == 'goods' && clearItem.reward.exchange_type == 'offline'">
                            <view class="clear-goods-left main-center cross-center">
                                <image class="goods-img" :src="clearItem.reward.goods.cover_pic"></image>
                            </view>
                            <view class="dir-top-nowrap main-center clear-goods-right">
                                <view class="t-omit-two">{{clearItem.reward.goods.name}}</view>
                            </view>
                        </view>
                        <view @click="toDetail(clearItem)" v-if="clearItem.reward.exchange_type != 'offline'" class="main-center"><view class="clear-detail">{{clearItem.reward.status == 'goods' ? '立即兑换' : clearItem.reward.status == 'card' || clearItem.reward.status == 'coupon' ? '立即使用': '去看看'}}</view></view>
                    </view>
                    <view v-if="clearItem.reward.exchange_type == 'offline' && (clearItem.reward.status == 'goods' || clearItem.reward.status == 'cash')" class="clear-qr-item dir-top-nowrap main-center cross-center">
                        <image class="clear-qr" show-menu-by-longpress :src="setting.contact_list[contactIndex].qrcode"></image>
                        <view v-if="clearItem.reward.status == 'goods'">{{is_not_wechat ? '添加客服兑换奖品' : '长按识别联系人兑现红包'}}</view>
                        <view v-if="clearItem.expire_at">兑换期限：{{clearItem.expire_at}}</view>
                        <view class="main-between cross-center clear-btn">
                            <view v-if="is_not_wechat" @click="copy">复制微信号</view>
                            <view v-if="is_not_wechat" @click="saveImg">保存图片</view>
                            <view v-if="!is_not_wechat" class="alone" @click="copy">复制微信号</view>
                        </view>
                    </view>
                    <view v-else-if="clearItem.reward.status == 'balance' || clearItem.reward.status == 'integral'" class="clear-gift-item dir-top-nowrap main-center cross-center">
                        <image class="clear-gift" src="./../image/gift.png"></image>
                    </view>
                    <view v-else class="clear-card-item dir-left-nowrap cross-center">
                        <view class="clear-card-left main-center cross-center" v-if="clearItem.reward.status == 'coupon'">
                            <view v-if="clearItem.reward.coupon.type == 2">
                                ￥<text>{{clearItem.reward.coupon.sub_price}}</text>
                            </view>
                            <view v-else>
                                <text>{{clearItem.reward.coupon.discount}}</text>折
                            </view>
                        </view>
                        <view class="clear-card-left main-center cross-center" v-if="clearItem.reward.status == 'card'">
                            <image class="card-img" :src="clearItem.reward.card.pic_url"></image>
                        </view>
                        <view class="clear-card-left main-center cross-center" v-if="clearItem.reward.status == 'goods'">
                            <image class="goods-img" :src="clearItem.reward.goods.cover_pic"></image>
                        </view>
                        <view class="dir-top-nowrap main-center clear-card-right" v-if="clearItem.reward.status == 'coupon'">
                            <view class="t-omit" v-if="clearItem.reward.coupon.min_price > 0">满{{clearItem.reward.coupon.min_price}}可用</view>
                            <view v-else>无门槛使用</view>
                            <view class="coupon-type t-omit" v-if="clearItem.reward.coupon.appoint_type == `3`">全场通用</view>
                            <view class="coupon-type t-omit" v-else-if="clearItem.reward.coupon.appoint_type == `4`">仅限当面付活动使用</view>
                            <view class="coupon-type t-omit" v-else-if="clearItem.reward.coupon.appoint_type == `5`">仅限礼品卡使用</view>
                            <view class="coupon-type t-omit" v-else>限品类</view>
                        </view>
                        <view class="dir-top-nowrap main-center clear-card-right" v-if="clearItem.reward.status == 'card'">
                            <view class="t-omit-two">{{clearItem.reward.card.name}}</view>
                        </view>
                        <view class="dir-top-nowrap main-center clear-card-right" v-if="clearItem.reward.status == 'goods'">
                            <view class="t-omit-two">{{clearItem.reward.goods.name}}</view>
                        </view>
                    </view>
                    <view class="clear-time" v-if="clearItem.reward.status == 'goods' && clearItem.reward.exchange_type != 'offline' && clearItem.expire_at">兑换期限：{{clearItem.expire_at}}</view>
                </view>
            </view>
            <view v-if="errorDialog" class="error-dialog main-center cross-center">
                <view class="error-content">
                    <view class="error-msg dir-top-nowrap main-center cross-center">
                        <view class="error-time">{{msg}}</view>
                    </view>
                    <view @click="errorDialog = false" class="error-submit">我知道了</view>
                </view>
            </view>
            <app-share-qr-code v-if="posterDialog" :theme="getTheme" v-model="posterDialog" :url="poster" :requestData="requestData" :shareView="!posterDialog"></app-share-qr-code>
        </view>
        <view v-else>
            <view v-if="first_rewards" class="reward-item">
                <image src="./../image/reward.png"></image>
                <view class="dir-top-nowrap main-center cross-center top-text">
                    <view>恭喜您获得<text v-if="!invite_user">{{successType}}</text></view>
                    <view v-if="invite_user"><text class="invite">{{invite_user.nickname}}</text>分享的{{successType}}</view>
                </view>
                <view class="coupon" v-if="first_rewards.status == 'coupon'">
                    <view>{{first_rewards.coupon.name}}</view>
                    <view class="coupon-detail">
                        <template v-if="first_rewards.coupon.type == 2">
                            ￥<text>{{first_rewards.coupon.sub_price}}</text>
                        </template>
                        <template v-else>
                            <text>{{first_rewards.coupon.discount}}</text>折
                        </template>
                    </view>
                </view>
                <view class="get-money" v-else><text>{{first_rewards.real_reward}}</text></view>
                <view @click="toUse" class="use-btn">{{first_rewards.status == 'coupon' ? '立即使用' : first_rewards.status == 'balance' ? '余额记录' : '去提现'}}</view>
                <view class="btn-item">
                    <!--  #ifdef H5 -->
                    <button @click="hShareAppMessage(true)" class="to-share">我也要发红包给好友</button>
                    <!--  #endif -->
                    <!--  #ifndef H5 -->
                    <button open-type="share" class="to-send">我也要发红包给好友</button>
                    <!--  #endif -->
                    <view @click="backMyself" class="go-back">查看我的红包墙</view>
                </view>
            </view>
            <!--相关推荐-->
            <app-goods-recommend :comment-style="comment_style"
                                 :goods-list="recommendGoodsList"
                                 :sureCart="true"
                                 :newList="true"
                                 :showSales="true"
                                 :theme="getTheme"
            ></app-goods-recommend>
            <view v-if="qrView" @touchmove.stop.prevent catchtouchmove="true" class="get-dialog">
                <view class="get-item qr-view">
                    <image @click.stop="qrView = false;" class="close-btn" src="./../image/close.png"></image>
                    <view class="get-content dir-top-nowrap main-center cross-center">
                        <image class="get-qr" show-menu-by-longpress :src="setting.contact_list[contactIndex].qrcode"></image>
                        <view>长按识别联系人兑现红包</view>
                        <view class="get-custom" :style="{'color': setting.custom_color}">{{setting.custom}}</view>
                        <view @click="copy" class="get-copy">复制微信号</view>
                    </view>
                    <image class="get-bg" :src="setting.bg_pic"></image>
                </view>
            </view>
        </view>
    </app-layout>
</template>

<script>
    import { mapState,mapGetters } from "vuex";
    import appBuyPrompt from '@/components/page-component/app-buy-prompt/app-buy-prompt.vue';
    import appShareQrCode from '@/components/page-component/app-share-qr-code-poster/app-share-qr-code-poster.vue';
    import appGoodsRecommend from "@/components/page-component/app-goods-recommend/app-goods-recommend.vue";

    export default {
        data() {
            return {
                getSuccess: false,
                is_not_wechat: true,
                qrView: false,
                posterDialog: false,
                poster: this.$api.fission.poster,
                errorDialog: false,
                requestData: null,
                msg: '',
                url: this.$api.fission.purchase,
                clearItem: null,
                first: true,
                invite_user: null,
                getView: false,
                clearView: false,
                shareView: false,
                shareItem: null,
                first_rewards: null,
                detail: {
                    style: 1,
                    number: 100
                },
                activity_log_id: 0,
                setting: {},
                number: [],
                child_user: [],
                recommendGoodsList: [],
                comment_style: null,
                height: 854,
                rewards: [
                    {people_number: 2,is_exchange: -2},
                    {people_number: 6,is_exchange: -2},
                    {people_number: 19,is_exchange: -2},
                    {people_number: 33,is_exchange: -2},
                    {people_number: 37,is_exchange: -2},
                ],
                contactIndex: 0,
                invite_user_id: 0,
                activity_id: 0,
                type: 2,
                radius: '22rpx',
                successType: '红包'
            }
        },
        computed: {
            ...mapState({
                userInfo: state => state.user.info,
            }),
            ...mapGetters('mallConfig', {
                getTheme: 'getTheme',
            }),
            bgStype() {
                let style = `min-height: ${this.height}rpx;`
                if(this.setting.activity_bg_style == 'gradient') {
                    style += `background:linear-gradient(to bottom, ${this.setting.activity_bg_color}, ${this.setting.activity_bg_gradient_color});`
                }else {
                    style += `background: ${this.setting.activity_bg_color}`
                }
                return style;
            },
        },
        components: {
            appBuyPrompt,appShareQrCode,appGoodsRecommend
        },
        // #ifdef MP
        onShareAppMessage() {
            return this.hShareAppMessage();
        },
        // #endif
        // #ifdef MP-WEIXIN
        onShareTimeline() {
            // 分享朋友圈beta
            let title = '送你一个';
            if(this.first_rewards.status == 'cash' || this.first_rewards.status == 'cash') {
                title += this.first_rewards.max_number > 0 ? this.first_rewards.max_number + '元' : this.first_rewards.min_number + '元'
            }
            title += '红包，速领！'
            return this.$shareTimeline({
                title: this.detail.app_share_title ? this.detail.app_share_title : title,
                imageUrl: this.detail.app_share_pic,
                query: {
                    activity_id: this.detail.id,
                    invite_user_id: this.userInfo.options.user_id
                }
            });
        },
        // #endif
        methods: {
            hShareAppMessage(s = false){
                this.shareView = false;
                let title = '送你一个';
                if(this.first_rewards.status == 'cash' || this.first_rewards.status == 'cash') {
                    title += this.first_rewards.max_number > 0 ? this.first_rewards.max_number + '元' : this.first_rewards.min_number + '元'
                }
                title += '红包，速领！'
                return this.$shareAppMessage({
                    title: this.detail.app_share_title ? this.detail.app_share_title : title,
                    imageUrl: this.detail.app_share_pic,
                    path: "/plugins/fission/index/index",
                    params: {
                        activity_id: this.detail.id,
                        invite_user_id: this.userInfo.options.user_id
                    }
                }, s);
            },
            toDetail(item) {
                if(item.reward.status == 'coupon') {
                    uni.navigateTo({
                        url: `/pages/goods/list?coupon_id=${item.reward.coupon.id}`
                    });
                }else if(item.reward.status == 'card') {
                    uni.navigateTo({
                        url: `/pages/card/details/details?id=${item.reward.card.user_card_id}`
                    });
                }else if(item.reward.status == 'balance') {
                    uni.navigateTo({
                        url: '/pages/balance/balance'
                    });
                }else if(item.reward.status == 'integral') {
                    uni.navigateTo({
                        url: '/pages/user-center/integral-detail/integral-detail'
                    });
                }else if(item.reward.status == 'goods') {
                    let mch_list = [{
                        mch_id: 0,
                        goods_list: [{
                            id: item.reward.goods.id,
                            attr: item.reward.goods.attr,
                            num: 1,
                            cat_id: 0,
                            goods_attr_id: item.reward.goods.attr_id
                        }],
                        reward_log_id: item.id
                    }];
                    let url = `/pages/order-submit/order-submit?mch_list=${JSON.stringify(mch_list)}`;
                    url += `&preview_url=${encodeURIComponent(this.$api.fission.order_preview)}&submit_url=${encodeURIComponent(this.$api.fission.order_submit)}&plugin=fission`;
                    uni.navigateTo({
                        url: url
                    })
                }
                this.clearView = false;
            },
            saveImg() {
                this.$utils.batchSave(this.setting.contact_list[this.contactIndex].qrcode).then(res => {
                    uni.showToast({title: '保存成功', icon: 'none'});
                })
            },
            copy() {
                this.$utils.uniCopy({
                    data: this.setting.contact_list[this.contactIndex].name,
                    success() {
                        uni.showToast({ title: '复制成功'});
                    }
                })
            },
            handle(item) {
                if(this.msg) {
                    this.errorDialog = true;
                    return false;
                }
                this.shareView = false;
                if(item.is_exchange == -2) {
                    if(item.level != 'small') {
                        this.shareItem = JSON.parse(JSON.stringify(item));
                    }else {
                        this.shareItem = JSON.parse(JSON.stringify(this.first_rewards));
                    }
                    this.shareView = true;
                }else if(item.is_exchange == -1 && item.level != 'small') {
                    if(item.type == 0) {
                        this.toGet();
                    }else {
                        this.toUnite(item.reward_id);
                    }
                }
            },
            toPoster() {
                this.requestData = {
                    activity_id: this.activity_id
                };
                this.posterDialog = true;
                this.shareView = false;
            },
            toUnite(reward_id) {
                let that = this;
                uni.showLoading({
                    title: '领取中...',
                    mask: true
                })
                that.$request({
                    url: that.$api.fission.unite,
                    data: {
                        activity_log_id: this.activity_log_id,
                        reward_id: reward_id
                    },
                    method: 'post'
                }).then(response=>{
                    uni.hideLoading();
                    if(response.code == 0) {
                        this.clearView = true;
                        this.clearItem = response.data;
                        this.getIndex();
                    }else {
                        uni.showToast({
                            title: response.msg,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                }).catch(response => {
                    uni.hideLoading();
                });
            },
            toRule() {
                if(this.detail.id) {
                    uni.navigateTo({
                        url: `/pages/rules/index?url=${encodeURIComponent(this.$api.fission.activity)}&data=${JSON.stringify({activity_id: this.detail.id,invite_user_id: this.invite_user_id})}&keys=${JSON.stringify(['activity', 'rule_content'])}&title=${this.detail.rule_title}`
                    });
                }
            },
            toLog() {
                uni.navigateTo({
                    url: '/plugins/fission/log/log'
                });
            },
            toGet() {
                this.$showLoading({
                    type: 'global',
                    text: '领取中...'
                });
                this.getActivity();
                this.loadRecommendGoodsList();
            },
            toUse() {
                if(this.first_rewards.status == 'coupon') {
                    uni.navigateTo({
                        url: `/pages/goods/list?coupon_id=${this.first_rewards.coupon.id}`
                    });
                }else if(this.first_rewards.status == 'balance') {
                    uni.navigateTo({
                        url: '/pages/balance/balance'
                    });
                }else {
                    this.qrView = true;
                }
            },
            loadRecommendGoodsList() {
                this.$request({
                    url: this.$api.goods.new_recommend,
                    method: 'get',
                    data: {
                        type: 'order_pay',
                    },
                }).then(response => {
                    if (response.code === 0) {
                        this.recommendGoodsList = response.data.list;
                        this.comment_style = response.data.comment_style;
                    }
                }).catch(() => {
                });
            },
            getActivity() {
                let that = this;
                that.$request({
                    url: that.$api.fission.activity,
                    data: {
                        activity_id: that.activity_id,
                        is_open: 1,
                        invite_user_id: that.invite_user_id
                    },
                    method: 'post'
                }).then(response=>{
                    that.$hideLoading();
                    if(response.code == 0) {
                        this.getView = false;
                        this.getSuccess = true;
                        this.detail = response.data.activity;
                        this.first_rewards = response.data.first_rewards;
                        if(this.first_rewards.real_reward > 10000) {
                            this.first_rewards.real_reward = this.first_rewards.real_reward.replace(this.first_rewards.real_reward.slice(-3),'...')
                        }
                        this.invite_user = response.data.invite_user;
                        this.successType = response.data.first_rewards.status == 'coupon' ? '优惠券' : '红包'
                    }else {
                        uni.showToast({
                            title: response.msg,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                }).catch(response => {
                    that.$hideLoading();
                });
            },
            getList() {
                let listLength = +this.detail.number - 1;
                if(this.detail.style == 1) {
                    let rewards = JSON.parse(JSON.stringify(this.rewards));
                    this.number = [];
                    this.number.unshift(this.first_rewards);
                    let total = 2; // 所占格数：大红包2格 小红包1格
                    let other = 3; // 剩余格数
                    let people_number = 0;
                    let need = 0;
                    let listIndex = -1;
                    let para = {
                        index: 0,
                        is_exchange: -2,
                        level: 'small',
                        reward: null
                    }
                    let end = {
                        people_number: listLength,
                        level: 'small'
                    }
                    rewards.push(end);
                    for(let index in rewards) {
                        people_number = index == 0 ? 0 : rewards[index - 1].people_number
                        need = rewards[index].people_number - people_number;
                        if(other*2 > need) {
                            let obj = {list: [],number: 0};
                            for(let i = 0; i < need;i++) {
                                listIndex++;
                                let para = {
                                    index: listIndex,
                                    is_exchange: -2,
                                    level: 'small',
                                    reward: null
                                }
                                obj.list.push(para)
                            }
                            obj.number = (obj.list.length + obj.list.length%2)/2;
                            if(obj.number == 1 && other == 2) {
                                obj.number = 2
                            }
                            if(obj.number == 2 && other == 3) {
                                obj.number = 3
                            }
                            if(obj.number == 4) {
                                obj.number = 5
                            }
                            if(obj.number > 0) {
                                this.number.push(obj);
                            }
                            if(rewards[index].level != 'small') {
                                this.number.push(rewards[index]);
                            }
                            total = 0;
                            for(let row of this.number) {
                                if(row.number > 0) {
                                    total += row.number
                                }else {
                                    total += 2
                                }
                            }
                            other = 5 - total%5;
                        }else {
                            let once = (need-other*2) /10;
                            let obj = {list: [],number: 0};
                            for(let i = 0; i < other*2;i++) {
                                listIndex++;
                                need--;
                                let para = {
                                    index: listIndex,
                                    is_exchange: -2,
                                    level: 'small',
                                    reward: null
                                }
                                obj.list.push(para)
                            }
                            obj.number = (obj.list.length + obj.list.length%2)/2;
                            if(obj.number > 0) {
                                this.number.push(obj);
                            }
                            total = 0;
                            for(let row of this.number) {
                                if(row.number > 0) {
                                    total += row.number
                                }else {
                                    total += 2
                                }
                            }
                            other = 5 - total%5;
                            if(once > 1) {
                                for(let j = 1;j< once;j++) {
                                    let smallObj = {list: [],number: 0};
                                    for(let x = 0; x < 10;x++) {
                                        listIndex++;
                                        need--;
                                        let para = {
                                            index: listIndex,
                                            is_exchange: -2,
                                            level: 'small',
                                            reward: null
                                        }
                                        smallObj.list.push(para)
                                    }
                                    smallObj.number = (smallObj.list.length + smallObj.list.length%2)/2;
                                    if(smallObj.number > 0) {
                                        this.number.push(smallObj);
                                    }
                                    other = 0;
                                }
                            }
                            let bigObj = {list: [],number: 0};
                            for(let z = 0; z < need;z++) {
                                listIndex++;
                                let para = {
                                    index: listIndex,
                                    is_exchange: -2,
                                    level: 'small',
                                    reward: null
                                }
                                bigObj.list.push(para)
                            }
                            bigObj.number = (bigObj.list.length + bigObj.list.length%2)/2;
                            if(bigObj.number == 2 && other == 3) {
                                bigObj.number = 3
                            }
                            if(bigObj.number == 4) {
                                bigObj.number = 5
                            }
                            if(bigObj.number > 0) {
                                this.number.push(bigObj);
                            }
                            if(rewards[index].level != 'small') {
                                this.number.push(rewards[index]);
                            }
                            total = 0;
                            for(let row of this.number) {
                                if(row.number > 0) {
                                    total += row.number
                                }else {
                                    total += 2
                                }
                            }
                            other = 5 - total%5;
                        }
                    }
                    setTimeout(()=>{
                        if(other > 0 && this.number[this.number.length -1].number) {
                            this.number[this.number.length -1].number += other;
                        }
                    })
                }else {
                    this.number = [];
                    this.number.push(this.first_rewards);
                    for(let i = 0;i < listLength;i++) {
                        let para = {
                            index: i,
                            is_exchange: -2,
                            level: 'small',
                            reward: null
                        }
                        this.number.push(para)
                    }
                }
                if(this.child_user.length > 0) {
                    for(let index in this.child_user) {
                        for(let row of this.number) {
                            if(row.list) {
                                for(let item of row.list) {
                                    if(item.index == index) {
                                        item.is_exchange = 1;
                                        item.reward = this.child_user[index]
                                    }
                                }
                            }else {
                                if(row.index == index) {
                                    row.is_exchange = 1;
                                    row.reward = this.child_user[index]
                                }
                            }
                        }
                    }
                }
            },
            backMyself() {
                this.getSuccess = false;
                this.getIndex();
            },
            getIndex() {
                let that = this;
                that.$request({
                    url: that.$api.fission.activity,
                    data: {
                        activity_id: this.activity_id ? this.activity_id : 0,
                        invite_user_id: this.invite_user_id ? this.invite_user_id : 0
                    },
                    method: 'post'
                }).then(response=>{
                    that.$hideLoading();
                    uni.hideLoading();
                    if(response.code == 0) {
                        this.first = false;
                        this.detail = response.data.activity;
                        this.activity_id = response.data.activity.id;
                        this.activity_log_id = response.data.activity_log_id;
                        this.first_rewards = response.data.first_rewards;
                        if(this.first_rewards.real_reward > 1000) {
                            this.first_rewards.real_reward = this.first_rewards.real_reward.replace(this.first_rewards.real_reward.slice(4 - this.first_rewards.real_reward.length),'...')
                        }
                        this.invite_user = response.data.invite_user;
                        if(response.data.child_user) {
                            this.child_user = response.data.child_user;
                            for(let item of this.child_user) {
                                if(item.real_reward > 1000) {
                                    item.real_reward = item.real_reward.replace(item.real_reward.slice(3 - item.real_reward.length),'...')
                                }
                            }
                        }
                        this.getView = this.activity_log_id == 0 ? true : false;
                        this.rewards = response.data.rewards;
                        for(let item of this.rewards) {
                            if(item.real_reward > 10000) {
                                item.real_reward = item.real_reward.replace(item.real_reward.slice(4 - item.real_reward.length),'...')
                            }
                        }
                        this.getList();
                        if(response.msg && response.msg != '获取成功') {
                            this.msg = response.msg;
                            this.errorDialog = true;
                        }
                    }else {
                        this.msg = response.msg;
                        this.detail.style = 2;
                        this.errorDialog = true;
                        setTimeout(()=>{
                            this.getList();
                        })
                    }
					// #ifdef H5
					this.hShareAppMessage();
					// #endif
                }).catch(response => {
                    that.$hideLoading();
                });
            },
            getSetting() {
                let that = this;
                that.$request({
                    url: that.$api.fission.setting,
                }).then(response=>{
                    if(response.code == 0) {
                        that.setting = response.data;
                        switch(response.data.style) {
                            case '1':
                                that.radius = '22rpx';
                                break;
                            case '2':
                                that.radius = '16rpx';
                                break;
                            case '3':
                                that.radius = '20rpx';
                                break;
                            case '4':
                                that.radius = '28rpx';
                                break;
                        }
                        that.contactIndex = Math.floor(Math.random()*+that.setting.contact_list.length);
                        that.getIndex();
                    }else {
                        uni.showToast({
                            title: response.msg,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                }).catch(response => {
                    that.$hideLoading();
                });
            },
            clickWechat() {
                let that = this;
                that.$request({
                    url: that.$api.fission.wechat,
                })
            },
        },

        onShow() {
            if(!this.first && this.activity_id > 0 && !this.getSuccess) {
                uni.showLoading({
                    mask: true
                })
                this.getIndex();
            }
        },

        onLoad(option) { this.$commonLoad.onload(option);
            this.$showLoading({
                type: 'global',
                text: '加载中...'
            });
            // #ifdef H5
            this.is_not_wechat = !this.$jwx.isWechat();
            if(!this.is_not_wechat) {
                this.clickWechat();
            }
            // #endif
            // #ifdef MP-WEIXIN
            wx.showShareMenu({
                menus: ['shareAppMessage', 'shareTimeline']
            })
            // #endif
            this.activity_id = option.activity_id ? option.activity_id : 0;
            this.invite_user_id = option.invite_user_id ? option.invite_user_id : 0;
            this.height = uni.getSystemInfoSync().windowHeight*2 - 480;
            this.getSetting();
        }
    }
</script>

<style scoped lang="scss">
    .error-dialog {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,.3);
        z-index: 30;
        .error-content {
            width: 630rpx;
            height: 294rpx;
            margin-top: -20%;
            background-color: #fff;
            border-radius: 16rpx;
            position: relative;
            z-index: 100;
            .error-msg {
                height: 206rpx;
                width: 630rpx;
                font-size: 28rpx;
                color: #666666;
                text-align: center;
                .error-time {
                    font-size: 32rpx;
                    color: #353535;
                }
            }
            .error-submit {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                z-index: 100;
                border-top: 2rpx solid #e2e2e2;
                line-height: 88rpx;
                height: 88rpx;
                color: #ff4544;
                font-size: 34rpx;
                text-align: center;
            }
        }
    }
    .get-dialog {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,.3);
        z-index: 30;
        .get-item {
            width: 528rpx;
            position: relative;
            height: 690rpx;
            margin-top: -20%;
            z-index: 100;
            &.qr-view {
                width: 527rpx;
                margin: 230rpx auto 0;
                position: relative;
                height: 700rpx;
                z-index: 100;
                .close-btn {
                    top: -70rpx;
                    right: -70rpx;
                }
            }
            &.clear {
                width: 582rpx;
                height: 869rpx;
                .close-btn {
                    top: 38rpx;
                }
                .clear-item {
                    position: absolute;
                    top: 210rpx;
                    left: 0;
                    right: 0;
                    width: 498rpx;
                    margin: 0 auto;
                    text-align: center;
                    font-size: 24rpx;
                    color: #999999;
                    z-index: 100;
                    &.goods {
                        top: 190rpx;
                    }
                    .clear-title {
                        color: #353535;
                        font-size: 40rpx;
                        font-weight: 600;
                    }
                    .clear-content {
                        color: #353535;
                        font-size: 26rpx;
                        margin: 20rpx 0 16rpx;
                        &.no-text {
                            margin: 26rpx 0;
                        }
                        text {
                            font-size: 46rpx;
                            font-family: Alibaba;
                            font-weight: 600;
                            color: #ff4544;
                        }
                    }
                    .clear-detail {
                        height: 56rpx;
                        border-radius: 28rpx;
                        padding: 0 30rpx;
                        background-color: #ff4544;
                        color: #fff;
                        font-size: 24rpx;
                        display: inline-block;
                        line-height: 56rpx;
                        text-align: center;
                    }
                    .clear-goods-item {
                        margin: 0 auto;
                        background-color: #f7f7f7;
                        width: 286rpx;
                        height: 96rpx;
                        border-radius: 16rpx;
                        .clear-goods-left {
                            width: 96rpx;
                            height: 96rpx;
                            .goods-img {
                                width: 76rpx;
                                height: 76rpx;
                                border-radius: 8rpx;
                            }
                        }
                        .clear-goods-right {
                            width: 190rpx;
                            height: 96rpx;
                            color: #353535;
                            font-size: 24rpx;
                            view {
                                text-align: left;
                            }
                        }
                    }
                }
                .clear-time {
                    position: absolute;
                    z-index: 100;
                    bottom: 110rpx;
                    left: 0;
                    width: 582rpx;
                    text-align: center;
                    color: #fff;
                    font-size: 24rpx;
                }
                .clear-card-item {
                    position: absolute;
                    bottom: 163rpx;
                    left: 0;
                    right: 0;
                    margin: 0 auto;
                    background-color: #fff;
                    color: #353535;
                    width: 498rpx;
                    height: 146rpx;
                    border-radius: 16rpx;
                    z-index: 100;
                    .clear-card-left {
                        width: 180rpx;
                        height: 146rpx;
                        color: #ff4544;
                        font-size: 24rpx;
                        .card-img {
                            width: 80rpx;
                            height: 80rpx;
                            border-radius: 40rpx;
                        }
                        .goods-img {
                            width: 90rpx;
                            height: 90rpx;
                            border-radius: 8rpx;
                        }
                        text {
                            font-size: 42rpx;
                        }
                    }
                    .clear-card-right {
                        width: 318rpx;
                        height: 146rpx;
                        color: #353535;
                        font-size: 28rpx;
                        .coupon-type {
                            font-size: 24rpx;
                            color: #999999;
                            margin-top: 10rpx;
                        }
                    }
                }
                .clear-gift-item {
                    position: absolute;
                    bottom: 100rpx;
                    left: 0;
                    right: 0;
                    margin: 0 auto;
                    width: 310rpx;
                    height: 277rpx;
                    z-index: 100;
                    .clear-gift {
                        width: 310rpx;
                        height: 277rpx;
                    }
                }
                .clear-qr-item {
                    z-index: 100;
                    position: absolute;
                    bottom: 34rpx;
                    left: 0;
                    right: 0;
                    margin: 0 auto;
                    width: 520rpx;
                    height: 354rpx;
                    color: #fff;
                    font-size: 24rpx;
                    .clear-qr {
                        width: 200rpx;
                        height: 200rpx;
                        margin-bottom: 20rpx;
                        flex-shrink: 0;
                    }
                    .clear-tip {
                        margin-top: #{-15rpx};
                    }
                    .clear-btn {
                        margin-top: 25rpx;
                        height: 78rpx;
                        width: 100%;
                        .alone {
                            width: #{500rpx};
                        }
                        view {
                            text-align: center;
                            line-height: 78rpx;
                            background-color: #fce5a1;
                            color: #cb0908;
                            margin: 0 20rpx;
                            width: 240rpx;
                            height: 78rpx;
                            border-radius: 39rpx;
                        }
                    }
                }
            }
            .get-content {
                position: absolute;
                top: 95rpx;
                left: 0;
                right: 0;
                margin: 0 auto;
                height: 565rpx;
                width: 454rpx;
                font-size: 20rpx;
                color: #353535;
                z-index: 100;
                .get-qr {
                    width: 230rpx;
                    height: 230rpx;
                    margin: 40rpx auto 10rpx;
                    display: block;
                }
                .get-custom {
                    color: #fff;
                    width: 454rpx;
                    height: 100rpx;
                    font-size: 24rpx;
                    margin-top: 50rpx;
                }
                .get-copy {
                    width: 424rpx;
                    height: 77rpx;
                    border-radius: 40rpx;
                    font-size: 28rpx;
                    color: #cb0908;
                    text-align: center;
                    font-weight: 500;
                    line-height: 77rpx;
                    background-color: #FDD88A;
                    margin: 20rpx auto 0;
                }
            }
            .get-bg {
                width: 100%;
                height: 100%;
            }
            .close-btn {
                width: 55rpx;
                height: 55rpx;
                position: absolute;
                top: -55rpx;
                right: -55rpx;
                z-index: 31;
                z-index: 100;
            }
            .item-info {
                position: absolute;
                top: 50rpx;
                left: 0;
                right: 0;
                margin: 0 auto;
                font-size: 28rpx;
                color: #ffebac;
                text-align: center;
                padding: 0 24rpx;
                z-index: 100;
                .reward-lock-text {
                    margin-top: -20rpx;
                    margin-bottom: 20rpx;
                    &.more-place {
                        margin-bottom: 0;
                    }
                }
                .item-about {
                    font-size: 40rpx;
                    margin-bottom: 24rpx;
                    &.card-name {
                        font-size: 46rpx;
                    }
                    &.less-marging {
                        margin-bottom: 14rpx;
                    }
                    text {
                        font-size: 80rpx;
                        font-family: Alibaba;
                    }
                }
            }
            .button-item {
                position: absolute;
                bottom: 26rpx;
                left: 0;
                right: 0;
                width: 424rpx;
                margin: 0 auto;
                z-index: 100;
                button {
                    width: 424rpx;
                    line-height: 90rpx;
                    text-align: center;
                    margin-bottom: 24rpx;
                    height: 90rpx;
                    font-size: 32rpx;
                    color: #cb0908;
                    border-radius: 45rpx;
                    background-color: #fce6a3;
                    box-shadow: 0 #{16rpx} #{16rpx} rgba(159,20,63, 0.3);
                }
            }
            .get-text {
                position: absolute;
                top: 60rpx;
                left: 0;
                height: 270rpx;
                width: 528rpx;
                color: #ffebac;
                font-size: 32rpx;
                text-align: center;
                z-index: 100;
                .invite_user {
                    font-size: 32rpx;
                    width: 488rpx;
                    margin-bottom: 20rpx;
                    color: #ffffff;
                    image {
                        width: 56rpx;
                        height: 56rpx;
                        border-radius: 28rpx;
                        display: block;
                    }
                    >view {
                        text-align: center;
                        margin-top: 12rpx;
                    }
                }
                .main-text {
                    font-size: 46rpx;
                    font-weight: 500;
                }
            }
        }
    }
    .rule {
        position: absolute;
        right: 24rpx;
        top: 38rpx;
        width: 125rpx;
        height: 48rpx;
        text-align: center;
        line-height: 48rpx;
        border-radius: 24rpx;
        color: #fff;
        font-size: 24rpx;
        z-index: 20;
        background-color: rgba(0,0,0,.3);
    }
    .log-btn {
        position: absolute;
        right: 24rpx;
        top: 118rpx;
        width: 90rpx;
        height: 90rpx;
        z-index: 20;
    }
    .head-img {
        display: block;
        width: 100%;
        height: 480rpx;
    }
    .activity {
        padding-top: 10rpx;
        .activity-name {
            width: 702rpx;
            padding: 24rpx 0;
            border-radius: 16rpx;
            background-color: rgba(0,0,0,.3);
            color: #fff;
            font-size: 24rpx;
            margin: 0 auto 10rpx;
            >view {
                margin: 5rpx 0;
            }
            .stage {
                margin-top: 28rpx;
                .hb {
                    margin: 0 18rpx;
                    width: 98rpx;
                    font-size: 20rpx;
                    position: relative;
                    .reward-text {
                        position: absolute;
                        bottom: 50rpx;
                        left: 0;
                        text-align: center;
                        color: #fff;
                        width: 98rpx;
                        height: 68rpx;
                        .card-img {
                            width: 34rpx;
                            height: 34rpx;
                            border-radius: 50%;
                        }
                    }
                    .reward-user {
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        width: 60rpx;
                        height: 60rpx;
                        border-radius: 50%;
                        margin: 0 auto;
                    }
                    .mask {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 98rpx;
                        height: 120rpx;
                        background-color: rgba(0,0,0,.3);
                        z-index: 9;
                        border-radius: 10rpx;
                        .lock-icon {
                            height: 42rpx;
                            width: 35rpx;
                            position: absolute;
                            top: 40rpx;
                            left: 50%;
                            margin-left: -21rpx;
                            z-index: 10;
                        }
                    }
                    >image {
                        width: 98rpx;
                        height: 120rpx;
                        margin-bottom: 10rpx;
                        border-radius: 10rpx;
                    }
                }
            }
        }
        .hb-list {
            width: 100%;
            padding: 18rpx 40rpx;
            .hb {
                margin: 12rpx 8rpx;
                width: 116rpx;
                height: 145rpx;
                position: relative;
                .reward-text {
                    position: absolute;
                    bottom: 45rpx;
                    left: 0;
                    text-align: center;
                    color: #fff;
                    width: 118rpx;
                    font-size: 20rpx;
                    text {
                        font-size: 30rpx;
                    }
                    &.t-omit {
                        bottom: 55rpx;
                    }
                }
                .reward-user {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    width: 60rpx;
                    height: 60rpx;
                    border-radius: 50%;
                    margin: 0 auto;
                }
                .send-text {
                    position: absolute;
                    width: 118rpx;
                    text-align: center;
                    bottom: 20rpx;
                    left: 0;
                    font-size: 19rpx;
                    color: #fff;
                    z-index: 10;
                    white-space: nowrap;
                }
                &.big {
                    width: 252rpx;
                    height: 314rpx;
                    .send-text {
                        width: 252rpx;
                        font-size: 24rpx;
                        bottom: 40rpx;
                        z-index: 10;
                        white-space: nowrap;
                    }
                    .reward-user {
                        width: 130rpx;
                        height: 130rpx;
                        border-radius: 65rpx;
                    }
                    .reward-text {
                        position: absolute;
                        bottom: 90rpx;
                        left: 0;
                        text-align: center;
                        color: #fff;
                        width: 252rpx;
                        font-size: 24rpx;
                        height: 110rpx;
                        .big-text {
                            font-size: 32rpx;
                        }
                        &.pic {
                            height: 112rpx;
                        }
                        .reward-card {
                            width: 76rpx;
                            height: 76rpx;
                            border-radius: 50%;
                            margin-bottom: 6rpx;
                            flex-shrink: 0;
                        }
                        .reward-goods {
                            width: 76rpx;
                            height: 76rpx;
                            border-radius: 8rpx;
                            margin-bottom: 6rpx;
                            flex-shrink: 0;
                        }
                        text {
                            font-size: 52rpx;
                        }
                    }
                    .need-people {
                        position: absolute;
                        width: 252rpx;
                        text-align: center;
                        bottom: 75rpx;
                        left: 0;
                        font-size: 28rpx;
                        color: #fff;
                        z-index: 10;
                    }
                    .mask {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        background-color: rgba(0,0,0,.3);
                        z-index: 9;
                        .reward {
                            position: absolute;
                            left: 0;
                            top: 128rpx;
                            width: 100%;
                            height: 40rpx;
                            z-index: 11;
                            >view {
                                display: inline-block;
                                padding: 0 18rpx;
                                height: 40rpx;
                                line-height: 40rpx;
                                background-color: #ff4544;
                                color: #fff;
                                border-radius: 20rpx;
                                font-size: 20rpx;
                            }
                        }
                        .lock-icon {
                            height: 77rpx;
                            width: 64rpx;
                            position: absolute;
                            top: 60rpx;
                            left: 50%;
                            margin-left: -32rpx;
                            z-index: 10;
                        }
                    }
                }
                .hb-bg {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
    .reward-item {
        width: 100%;
        height: 1230rpx;
        position: relative;
        >image {
            width: 100%;
            height: 100%;
        }
        .top-text {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 200rpx;
            color: #353535;
            font-size: 50rpx;
            .invite {
                color: #ff4544;
            }
        }
        .get-money {
            position: absolute;
            bottom: 760rpx;
            left: 0;
            right: 0;
            width: 450rpx;
            margin: 0 auto;
            font-size: 28rpx;
            color: #666666;
            text-align: center;
            text {
                font-size: 98rpx;
                color: #ff4544;
            }
            &:after {
                content: '元'
            }
        }
        .coupon {
            position: absolute;
            bottom: 770rpx;
            left: 0;
            right: 0;
            width: 450rpx;
            margin: 0 auto;
            font-size: 26rpx;
            color: #666;
            text-align: center;
            .coupon-detail {
                margin-top: 20rpx;
                color: #353535;
                font-size: 66rpx;
            }
        }
        .use-btn {
            position: absolute;
            top: 480rpx;
            left: 0;
            right: 0;
            width: 210rpx;
            height: 64rpx;
            line-height: 64rpx;
            text-align: center;
            background-color: #ff4544;
            border-radius: 32rpx;
            font-size: 32rpx;
            color: #fff;
            margin: 0 auto;
        }
        .btn-item {
            position: absolute;
            top: 670rpx;
            left: 0;
            right: 0;
            width: 490rpx;
            margin: 0 auto;
            view,button {
                height: 88rpx;
                line-height: 88rpx;
                text-align: center;
                border-radius: 44rpx;
                font-size: 32rpx;
                color: #cb0908;
            }
            .to-send {
                background-color: #fce5a0;
            }
            .go-back {
                margin-top: 38rpx;
                background-color: #f6413f;
                color: #fce5a0;
                border: 3rpx solid #fce5a0;
            }
        }
    }
</style>